<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Wombat Coffee Roasters</title>
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      :root {
        font-size: clamp(0.875em, 0.5svw + 0.6em, 1.125em);
      }

      body {
        margin: 0;
        font-family: Helvetica, Arial, sans-serif;
      }

      a:link {
        color: #1476b8;
        font-weight: bold;
        text-decoration: none;
      }
      a:visited {
        color: #1430b8;
      }
      a:hover {
        text-decoration: underline;
      }
      a:active {
        color: #b81414;
      }

      .page-header {
        padding: 0.4em 1em;
        background-color: #fff;
      }

      .title > h1 {
        color: #333;
        text-transform: uppercase;
        font-size: 1.5rem;
        margin-block: 0.2em;
      }

      @media (min-width: 560px) {
        .title > h1 {
          font-size: 2.25rem;
        }
      }

      .slogan {
        color: #888;
        font-size: 0.875em;
        margin: 0;
      }

      .hero {
        padding: 2em 1em;
        text-align: center;
        background-image: url(coffee-beans.jpg);
        background-size: 100%;
        color: #fff;
        text-shadow: 0.1em 0.1em 0.3em #000;
      }

      main {
        padding: 1em;
      }

      .subtitle {
        margin-block: 1.5em;
        font-size: 0.875rem;
        text-transform: uppercase;
      }

      .menu {
        position: relative;
      }

      .menu-toggle {
        position: absolute;
        top: -1.2em;
        right: 0.1em;

        border: 0;
        background-color: transparent;

        font-size: 3em;
        width: 1em;
        height: 1em;
        line-height: 0.4;
        text-indent: 5em;
        white-space: nowrap;
        overflow: hidden;
      }
      .menu-toggle::after {
        position: absolute;
        top: 0.2em;
        left: 0.2em;
        display: block;
        content: "\2261";
        text-indent: 0;
      }

      .menu-dropdown {
        display: none;
        position: absolute;
        right: 0;
        left: 0;
        margin: 0;
      }

      .menu.is-open .menu-dropdown {
        display: block;
      }

      .nav-menu {
        margin: 0;
        padding-left: 0;
        border: 1px solid #ccc;
        list-style: none;
        background-color: #000;
        color: #fff;
      }

      .nav-menu > li + li {
        border-top: 1px solid #ccc;
      }

      .nav-menu > li > a {
        display: block;
        padding: 0.8em 1em;
        color: #fff;
        font-weight: normal;
      }
    </style>
    <script type="module">
      var button = document.getElementById("toggle-menu");
      button.addEventListener("click", function (event) {
        event.preventDefault();
        var menu = document.getElementById("main-menu");
        menu.classList.toggle("is-open");
      });
    </script>
  </head>

  <body>
    <header id="header" class="page-header">
      <div class="title">
        <h1>Wombat Coffee Roasters</h1>
        <div class="slogan">We love coffee</div>
      </div>
    </header>

    <nav class="menu" id="main-menu">
      <button class="menu-toggle" id="toggle-menu">toggle menu</button>
      <div class="menu-dropdown">
        <ul class="nav-menu">
          <li><a href="/about.html">About</a></li>
          <li><a href="/shop.html">Shop</a></li>
          <li><a href="/menu.html">Menu</a></li>
          <li><a href="/brew.html">Brew</a></li>
        </ul>
      </div>
    </nav>

    <aside id="hero" class="hero">
      Welcome to Wombat Coffee Roasters! We are passionate about our craft,
      striving to bring you the best hand-crafted coffee in the city.
    </aside>

    <main class="main">
      <section class="column">
        <h2 class="subtitle">Single-origin</h2>
        <p>
          We have built partnerships with small farms around the world to
          hand-select beans at the peak of season. We then carefully roast in
          <a href="/batch-size.html">small batches</a>
          to maximize their potential.
        </p>
      </section>
      <section class="column">
        <h2 class="subtitle">Blends</h2>
        <p>
          Our tasters have put together a selection of carefully balanced
          blends. Our famous
          <a href="/house-blend.html">house blend</a>
          is available year round.
        </p>
      </section>
      <section class="column">
        <h2 class="subtitle">Brewing Equipment</h2>
        <p>
          We offer our favorite kettles, French presses, and pour-over cones.
          Come to one of our <a href="/classes.html">brewing classes</a> to
          learn how to brew the perfect pour-over cup.
        </p>
      </section>
    </main>
  </body>
</html>
